<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../application/jquery.js"></script>
    <script src="../application/vue.js"></script>
</head>
<body>
    <div class="app">
        <p>mag:{{msg}}</p>
        <p>result:{{result}}</p>
        <input type="text" v-model="msg">
        <hr>
        <p>{{getNum}}</p>
        <p>{{getNum}}</p>
        <p>{{getNum}}</p>
        <p>{{getNum}}</p>
        <p>{{getNum}}</p>
        <p>{{getNum}}</p>
        <hr>
        <p>{{num | setNum()}}</p>
        <p>{{num | setNum()}}</p>
        <p>{{num | setNum()}}</p>
        <p>{{num | setNum()}}</p>
        <p>{{num | setNum()}}</p>
        <p>{{num | setNum()}}</p>
        <p>{{num | setNum()}}</p>
    </div>
</body>
<script>
    new Vue({
        el:".app",
        data:{
            msg:"哈哈哈",
            result:[],
            num:"随机数值:"
        },
        computed:{
            getNum(){
                console.log("计算属性被执行");
                return this.num+Math.random();
            }
        },
        filters:{
            setNum(v){
                console.log("过滤器被执行");
                return v+Math.random();
            }
        },
        watch:{
            msg:{
                handler(nv,ov){
                    this.loadBaidu();
                    console.log(nv,ov);
                },
                // immediate:true
            }
        },
        methods:{
            loadBaidu(){
                $.ajax({
                    url:"https://www.baidu.com/su",
                    dataType:"jsonp",
                    jsonp:"cb",
                    data:{
                        wd:this.msg
                    },
                    success:({s})=>{
                        this.result=s;
                    }
                })
            }
        }
    })
</script>
</html>